<template>
  <div
    id="app"
    :class="{ 'site-sidebar--fold': sidebarFold }"
  >
    <template v-if="isLoginPage">
      <router-view></router-view>
    </template>

    <template v-else>
      <headbar></headbar>
      <sidebar></sidebar>
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main class="site-content">
          <el-card :body-style="siteContentViewHeight">
            <router-view />
          </el-card>
        </main>
      </div>
    </template>
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar';
import Headbar from '@/components/Headbar';

export default {
  components: {
    Sidebar,
    Headbar
  },

  computed: {
    isLoginPage () {
      const login = (this.$route.path === '/' || this.$route.path === '/login') ? true : false;
      return login;
    },
    documentClientHeight: {
      get() { return this.$store.state.common.documentClientHeight },
      set(val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    },
    sidebarFold: {
      get() { return this.$store.state.common.sidebarFold }
    },
    siteContentViewHeight () {
      var height = this.documentClientHeight - 50 - 30 - 2
      
      return { minHeight: height + 'px' }
    }
  },

  methods: {
    // 重置窗口可视高度
    resetDocumentClientHeight () {
      this.documentClientHeight = document.documentElement['clientHeight']
      window.onresize = () => {
        this.documentClientHeight = document.documentElement['clientHeight']
      }
    }
  },

  mounted() {
    this.resetDocumentClientHeight();
  }
};
</script>

<style>
html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  height: 100%;
}
</style>
